import React, { useState, useEffect } from 'react'
import { Button } from 'antd-mobile'
import Block from '../../components/Block/Block'
import './index.css'
const shuffle = function (array) {
  var m = array.length,
    t, i;
  while (m) {
    i = Math.floor(Math.random() * m--);
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }
  return array;
  // saddsa asdasddsa
}
export default function Home(props) {
  // 容器行列数量
  const [rowCount, setRowCount] = useState(0);
  // 容器内容数组
  const [quareArr, setQuareArr] = useState([]);
  // 设置方块宽高
  const [quareStyle, setQuareStyle] = useState('');
  // 设置开始按钮宽高
  const [maskStyle, setMaskStyle] = useState('');
  // 颜色容器
  const [colorArr, setcolorArr] = useState([]);
  useEffect(() => {
    setQuareCount(16, 4);

  }, [])
  useEffect(() => {
    // 颜色种类
    const colorType = ['#ebd00f', '#0f9aeb', '#eb0f21', '#0feb2c'];
    setQuareStyle(() => (100 / (quareArr.length / rowCount)) + '%');
    setcolorArr(colorArr => {
      let empty = [];
      for (let i = 0; i < quareArr.length; i++) {
        empty.push(colorType[parseInt(Math.random() * 4)])
      }
      return empty

    })
    if (rowCount === 4) {
      setMaskStyle(40)
    } else if (rowCount === 5) {
      setMaskStyle(48)
    } else if (rowCount === 6) {
      setMaskStyle(26.666666666666668)
    } else if (rowCount === 7) {
      setMaskStyle(34.285714285714285)
    } else {
      setMaskStyle(20)
    }
  }, [rowCount, quareArr])
  // 设置容器内容
  function setQuareCount(count, rowCount) {
    setQuareArr(quareArr => {
      let empty = [];
      for (let i = 0; i < count; i++) {
        empty.push(i + 1)
      }
      return shuffle(empty)
    })
    setRowCount(rowCount)
  }
  function benginGame(){
    props.history.push('/game',{rowCount})
  }
  return (
    <div>
      <div className='game_contaier'>
        <ul className='game_box'>
          {
            quareArr.map((item, index) => {
              return (
                <li
                  style={{ width: quareStyle, height: quareStyle, background: colorArr[index] }}
                  key={index}>
                  {item}
                </li>
              )
            })
          }
        </ul>
        <div className="mask" style={{ width: maskStyle + 'vw', height: maskStyle + 'vw' }} onClick={() => benginGame(16, 4)}>开始</div>
      </div>

      <Block title="请选择游戏难度"></Block>
      <div className='control_quare_count'>
        <Button size='large' color='primary' onClick={() => setQuareCount(16, 4)} > 4 x 4</Button>
        <Button size='large' color='primary' onClick={() => setQuareCount(25, 5)} > 5 x 5</Button>
        <Button size='large' color='primary' onClick={() => setQuareCount(36, 6)} > 6 x 6</Button>
        <Button size='large' color='primary' onClick={() => setQuareCount(49, 7)} > 7 x 7</Button>
        <Button size='large' color='primary' onClick={() => setQuareCount(64, 8)} > 8 x 8</Button>
      </div>
    </div>
  )
}
